<template>
  <div id="mv">
    <el-row type="flex" justify="center" class="container">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <el-row type="flex" justify="space-between">
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <p class="hd-title" @click="goBack"><i class="el-icon-arrow-left"></i>MV详情</p>
            <video :src="mvUrl" controls loop></video>
            <div class="user">
              <div class="images"><img :src="mvData.cover" alt="" /></div>
              <p class="name">{{ mvData.artistName }}</p>
            </div>
            <p class="mv-title nowrap">
              {{ mvData.name }}<i class="el-icon-caret-bottom"></i>
            </p>
            <div class="mv-desc">
              <p class="up-time">发布：{{ mvData.publishTime }}</p>
              <p class="play-count">
                播放：{{
                  mvData.playCount > 10000
                    ? Math.floor(mvData.playCount / 10000) + "万次"
                    : mvData.playCount + "次"
                }}
              </p>
            </div>
            <div class="btns">
              <div class="left">
                <div class="btn-mv">
                  <Icon type="ios-thumbs-up-outline" />赞({{
                    mvNum.likedCount
                  }})
                </div>
                <div class="btn-mv">
                  <Icon type="ios-folder-outline" />收藏({{ mvData.subCount }})
                </div>
                <div class="btn-mv">
                  <Icon type="ios-open-outline" />分享({{ mvData.shareCount }})
                </div>
                <div class="btn-mv">
                  <Icon type="ios-download-outline" />下载MV
                </div>
              </div>
              <p class="report">举报</p>
            </div>
            <div class="comment">
              <p class="titles">
                评论<span class="comment-num">({{ mvData.commentCount }})</span>
              </p>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 6 }"
                placeholder="发表评论"
                v-model="textarea2"
              >
              </el-input>
              <p class="tit">精彩评论</p>
              <div class="more-btn">
                <Button type="default" shape="circle">
                  更多精彩评论
                  <Icon type="ios-arrow-forward"></Icon>
                </Button>
              </div>
              <p class="titles">
                最新评论<span class="comment-num"
                  >({{ mvData.commentCount }})</span
                >
              </p>
              <p class="warn">接口问题：{{ mvComment.msg }}</p>
              <!-- <el-row
                class="hot-item"
                v-for="(item, indexs) in $store.state.songcomment.comments"
                :key="indexs + 's'"
                type="flex"
                justify="space-between"
              >
                <div class="left">
                  <div class="icon">
                    <img v-lazy="item.user.avatarUrl" alt="" />
                  </div>
                  <div class="user-comm">
                    <p class="username">
                      <span>{{ item.user.nickname }}:</span>{{ item.content }}
                    </p>
                    <div class="right">
                      <p class="up-time">
                        {{ new Date(item.time).toLocaleString() }}
                      </p>
                      <ul>
                        <li>举报</li>
                        <li>
                          <Icon type="ios-thumbs-up-outline" /><span
                            v-show="item.likedCount > 0"
                            >{{ item.likedCount }}</span
                          >
                        </li>
                        <li><Icon type="ios-share-outline" /></li>
                        <li><Icon type="ios-text-outline" /></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </el-row> -->
              <el-row class="page" type="flex" justify="center">
                <el-pagination
                  background
                  @prev-click=""
                  @next-click=""
                  @current-change=""
                  layout="prev, pager, next"
                  :page-size="20"
                  :total="100"
                >
                </el-pagination>
              </el-row>
            </div>
          </el-col>
          <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
            <p class="hd-title">相关推荐</p>
            <div class="simil" v-for="(item, index) in mvSimilar" :key="index" @click=" skipMv(item)">
              <div class="images">
                <p class="pl-count">
                  <Icon type="ios-play-outline" />{{
                    item.playCount > 10000
                      ? Math.floor(item.playCount / 10000) + "万"
                      : item.playCount
                  }}
                </p>
                <img :src="item.cover" alt="" />
                <p class="duration">
                  {{ Math.floor(item.duration /1000/ 60) &lt; 10? '0' + Math.floor(item.duration/1000/ 60):Math.floor(item.duration/1000/ 60)

                  }}:{{
                    Math.floor(item.duration /1000 % 60) &lt; 10 ? '0' +(Math.floor(item.duration /1000% 60)):Math.floor(item.duration /1000 % 60)
                  }}
                </p>
              </div>
              <div class="right">
                <div class="desc .webkit-box">
                  <span class="mv">MV</span>
                  <span class="content">{{ item.name }}</span>
                </div>
                <p class="artistName">{{ item.artistName }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "mv",
  data() {
    return {
      mvDetail: {},
      mvData: {},
      mvUrl: "",
      artists: {},
      mvNum: {},
      mvComment: {},
      textarea2: "",
      mvSimilar: [],
    };
  },
  created() {
    this.mvDetail = JSON.parse(this.$route.query.list);
    console.log(this.$route.query.list);
    //请求mv数据
    this.axios({
      withCredentials: true,
      method: "get",
      url: "https://music.hzbiz.net/mv/detail?timetamp=" + new Date().getTime(),
      params: {
        mvid: this.mvDetail.id,
      },
    }).then((res) => {
      this.mvData = res.data.data;
      console.log("mv数据", res.data);
    });
    //请求mvUrl
    this.axios({
      withCredentials: true,
      method: "get",
      url: "https://music.hzbiz.net/mv/url?timetamp=" + new Date().getTime(),
      params: {
        id: this.mvDetail.id,
      },
    }).then((res) => {
      this.mvUrl = res.data.data.url;
      console.log("mvUrl", res.data);
    });
    //获取 mv 点赞转发评论数数据
    this.axios({
      withCredentials: true,
      method: "get",
      url:
        "https://music.hzbiz.net/mv/detail/info?timetamp=" +
        new Date().getTime(),
      params: {
        mvid: this.mvDetail.id,
      },
    }).then((res) => {
      this.mvNum = res.data;
      console.log("mv点赞转发评论数数据", res.data);
    });
    //获取mv评论
    this.axios({
      withCredentials: true,
      method: "get",
      url:
        "https://music.hzbiz.net/comment/mv?timetamp=" + new Date().getTime(),
      params: {
        mvid: this.mvDetail.id,
      },
    }).then((res) => {
      this.mvComment = res.data;
      console.log("mv评论", res.data);
    });
    //相似mv
    this.axios({
      withCredentials: true,
      method: "get",
      url: "https://music.hzbiz.net/simi/mv?timetamp=" + new Date().getTime(),
      params: {
        mvid: this.mvDetail.id,
      },
    }).then((res) => {
      this.mvSimilar = res.data.mvs;
      console.log("相似mv", res.data);
    });
  },
  methods: {
      //回退
      goBack(){
          window.history.back()
      },
      //跳转mv
    skipMv(item){
      this.$router.push({
        path:"/mv",
        query:{
          list:JSON.stringify(item)
        }
      })
      location.reload()
    },
  },
};
</script>

<style  scoped>
.container {
  margin-top: 15px;
  margin-bottom: 300px;
}
.container p.hd-title {
  font-size: 18px;
  color: rgb(37, 37, 37);
  cursor: pointer;
  margin-bottom: 20px;
}
.container p.hd-title > i {
  margin-right: 8px;
}
.container video {
  width: 100%;
}
.user {
  display: flex;
  align-items: center;
  margin-top: 15px;
  cursor: pointer;
}
.user .images {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 10px;
}
.user .images img {
  height: 100%;
  width: auto;
}
.mv-title {
  font-size: 23px;
  margin-top: 30px;
  font-weight: bold;
  color: #000;
}
.mv-title > i {
  margin-left: 10px;
}
.mv-desc {
  display: flex;
  margin-top: 10px;
  margin-bottom: 20px;
  color: rgb(184, 186, 187);
  opacity: 0.5;
}
.mv-desc .up-time {
  margin-right: 25px;
}
.btns {
  display: flex;
  justify-content: space-between;
}
.btns .left {
  display: flex;
}
.btns .left .btn-mv {
  padding: 5px 25px;
  border-radius: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #000;
  cursor: pointer;
  margin-right: 10px;
}
.btns .left .btn-mv i {
  margin-right: 5px;
}
.btns .left .btn-mv:hover {
  background-color: #f5f5f5;
}
.btns p.report {
  text-decoration: underline;
  cursor: pointer;
  color: rgb(148, 147, 147);
}
.btns p.report:hover {
  color: rgb(32, 32, 32);
}
.comment {
  margin-top: 50px;
}
.comment p.titles {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 26px;
}
.comment span.comment-num {
  color: #666666;
  font-size: 14px;
  font-weight: normal;
  margin-left: 3px;
}
.comment p.tit {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  margin-top: 40px;
}
.hot-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
  margin-top: 20px;
}
.hot-item .left .user-comm {
  width: 495px;
  margin-left: 15px;
}
.hot-item .left .icon {
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 50%;
}
.hot-item .left {
  display: flex;
  justify-content: flex-start;
}
.hot-item .left .username {
  color: #000;
  margin-bottom: 10px;
}
.hot-item .left .username span {
  color: #6c92bc;
}
.hot-item .right {
  display: flex;
  justify-content: space-between;
}
.hot-item .right ul {
  display: flex;
  justify-content: flex-end;
}
.hot-item .right ul li {
  padding: 0 10px;
  cursor: pointer;
  color: #666666;
}
.hot-item .right ul li:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.hot-item .right ul li:first-child {
  visibility: hidden;
}
.hot-item:hover .right ul li:first-child {
  visibility: visible;
}
.more-btn {
  width: 135px;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 50px;
}
.page {
  padding-top: 30px;
}
.right-list > p {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.right-list li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  padding: 5px;
  border-radius: 5px;
}
.right-list li:hover {
  background-color: #cfcece;
}
.right-list li .icon {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.right-list li .right-desc {
  margin-left: 10px;
  width: 70%;
}
.right-list li .imageicon {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  overflow: hidden;
  background-color: #ffffff;
  opacity: 0.9;
}
.right-list li .imageicon img {
  width: 60%;
  margin-left: 3px;
}
.warn {
  color: red;
}
.simil {
  height: 70px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.simil .images {
  width: 50%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.simil .images p.pl-count {
  position: absolute;
  right: 3px;
  top: 3px;
  color: #ffffff;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.simil .images p.duration {
  position: absolute;
  bottom: 3px;
  right: 3px;
  color: #ffffff;
}
.simil .images p.pl-count > i {
  margin-right: 3px;
}
.simil .right {
  width: 50%;
  margin-left: 10px;
}
.simil .right .mv {
  border: 1px solid #ec4141;
  border-radius: 3px;
  font-size: 12px;
  color: #ec4141;
  padding: 0 1px;
}
.simil .right .desc {
  -webkit-line-clamp: 2;
  margin-bottom: 5px;
}
.simil .right .artistName {
  color: rgb(148, 147, 147);
  opacity: 0.7;
}
</style>